<template>
  <div class="table">
    <div class="head-handle" style="margin-bottom: 5px;">
      <slot name="head-handle">
        <el-button v-if="headHandle" :type="headHandle?.add.type" @click="headHandle?.add.callback">{{headHandle?.add.label}}</el-button>
      </slot>
    </div>
    <el-table ref="table" :data="data" :height="250" style="width: 100%" :row-key="rowKey" highlight-current-row @current-change="currentRowChange">
      <slot></slot>
      <!-- {{data}} -->
      <el-table-column label="操作" v-if="handle !== undefined || customHandle !== undefined" fixed="right">
        <template #default="{ row }">
          <div style="display: flex;">
            <div class="handle" v-if="handle">
              <el-button v-if="handle?.edit" type="primary" @click="handle?.edit({...row})">编辑</el-button>
              <el-popconfirm v-if="handle?.delete" title="确认删除吗?" confirm-button-text="确认" cancel-button-text="取消"
                @confirm="handle?.delete(row._id)" @cancel="cancel">
                <template #reference>
                  <el-button type="danger">删除</el-button>
                </template>
              </el-popconfirm>
            </div>
            <!-- 自定义操作按钮 -->
            <div class="custom-btn" v-if="customHandle">
              <el-button :type="val?.type" v-for="val in customHandle" :key="val.label" @click="val.callback(row)">{{
                  val.label
              }}</el-button>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-if="pagination" :total="pagination.total" :size="pagination.size" @current-change="currentChange"></Pagination>
  </div>
</template>

<script lang="ts" setup>
import Pagination from '@/components/Pagination/Pagination.vue'
import { ref, onMounted } from 'vue'
import type { ElTable } from 'element-plus'

const table = ref<InstanceType<typeof ElTable>>()

onMounted(() => {
  console.log('======================================')
  console.log(table)
  console.log(table?.value?.getSelectionRows)
})
console.log(table?.value?.getSelectionRows)
defineExpose({
  tableInstance: table
})

type Btn = {
  label: string,
  callback: (row: object) => {}
  type?: string,
}
type Handle = {
  [propName: string]: Btn
}

type Props = {
  data: object[],
  total?: number,
  pagination?: {
    total: number,
    size: number
  },
  handle?: {
    edit: (row: object) => {},
    delete: (id: number | string) => {}
  }
  customHandle?: Handle,
  headHandle?: {
    add: Btn
  },
  rowKey?: string,
  currentChange?: Function
}
const props = withDefaults(defineProps<Props>(), {
  rowKey: '_id'
})

// 自定义按钮
const customBtnkeyList: string[] = props.handle ? Object.keys(props.handle).filter(v => !['edit', 'delete'].includes(v)) : []
console.log(customBtnkeyList)

const emit = defineEmits(['current-change'])
const currentChange = (index: number) => {
  emit('current-change', index)
}
const cancel = () => { }

const currentRowChange = (row: any) => {
  console.log('当前行改变', row)
  if (props.currentChange) {
    props.currentChange({...row})
  }
  // console.log(table?.value?.getSelectionRows())
}

</script>

<style lang="scss" scoped>
.table {
  height: 100%;
  display: flex;
  flex-direction: column;

  .el-table {
    flex: 1;

    // :slotted()插槽选择器
    // height: 100%;
    :deep(.img) {
      width: 50px;
      height: 50px;
      // border-radius: 50%;
      margin-left: 10px;
    }
    .handle{
      margin-right: 5px;
    }
  }

}
</style>
